<template>
  <div style="width:100%" class="flex around footer">
    <div data-w-id="09c6b4f3-a66b-7fc4-2412-ab27d8a5d99a" class="lottie-footer" data-animation-type="lottie" data-src="https://uploads-ssl.webflow.com/63744cb0fa1468f8519ecaf7/63744cb0fa146872b09ecb2d_Lottie%20Footer.json" data-loop="1" data-direction="1" data-autoplay="1" data-is-ix2-target="0" data-renderer="svg" data-default-duration="17" data-duration="0" style="opacity: 1;">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 248" width="1000" height="120" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);">
        <defs>
          <clipPath id="__lottie_element_3">
            <rect width="1200" height="248" x="0" y="0"></rect>
          </clipPath>
          <linearGradient v-for="item in svgData" :key="item.id" :id="item.id" spreadMethod="pad" gradientUnits="userSpaceOnUse" :x1="item.x1" y1="250" :x2="item.x1" y2="0">
            <stop offset="0%" :stop-color="item.stopColor"></stop>
            <stop offset="100%" :stop-color="item.stopColor2"></stop>
          </linearGradient>
        </defs>
        <g clip-path="url(#__lottie_element_3)">
          <g :transform="mas" opacity="1" style="display: block;">
            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
              <path fill="url(#__lottie_element_7)" fill-opacity="1" :d="d1"></path>
            </g>
          </g>
          <g :transform="mas2" opacity="1" style="display: block;">
            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
              <path fill="url(#__lottie_element_11)" fill-opacity="1" :d="d2"></path>
            </g>
          </g>
          <g :transform="mas3" opacity="1" style="display: block;">
            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
              <path fill="url(#__lottie_element_15)" fill-opacity="1" :d="d3"></path>
            </g>
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>

<script setup lang='ts'>
let mas = ref("");
let mas2 = ref("");
let mas3 = ref("");
let d1 = ref(
  "M 571.542 83.8007 C 501.698 95.9377 422.798 124.576 C 372.828 207.983 366.815 229.34 Z"
);
let d2 = ref(
  "M 571.542 83.8007 C 501.698 95.9377 422.798 124.576 C 372.828 207.983 366.815 229.34 Z"
);
let d3 = ref(
  "M 571.542 83.8007 C 501.698 95.9377 422.798 124.576 C 372.828 207.983 366.815 229.34 Z"
);
const svgData = [
  {
    d1: d1.value,
    mas: mas.value,
    id: "__lottie_element_7",
    x1: "400",
    stopColor: "#c3c8ff",
    stopColor2: "#dfe1f9",
  },
  {
    d1: d2.value,
    mas: mas2.value,
    id: "__lottie_element_11",
    x1: "1000",
    stopColor: "#dab99d",
    stopColor2: "#fae7d7",
  },
  {
    d1: d3.value,
    mas: mas3.value,
    id: "__lottie_element_15",
    x1: "600",
    stopColor: "#ffc0f0",
    stopColor2: "#f7e3f2",
  },
];
var loop = function () {
  var now = performance.now();
  d1.value = `M 0 250
 S ${Math.abs(1.4 - Math.sin(now / 5000)) * 200} 10 ${
    Math.abs(1.7 - Math.sin(now / 5000)) * 200 + 100
  } ${Math.abs(-Math.sin(now / 5000)) * 10}
 S ${Math.abs(2 - Math.sin(now / 5000)) * 100 + 1000} 0 ${
    Math.abs(-Math.sin(now / 5000)) * 200 + 1000
  } 250
 Z
 `;
  d2.value = `M 1200 250
 S ${1200 - Math.abs(1.4 - Math.sin(now / 5000)) * 10} 0 ${
    Math.abs(1 + Math.sin(now / 4000)) * 200 + 600
  } ${Math.abs(1 - Math.sin(now / 1000)) * 30}
 S ${Math.abs(1 - Math.sin(now / 1000)) * 100 + 300} ${
    Math.abs(Math.sin(now / 3000)) * 200 + 400
  } ${Math.abs(1 - Math.sin(now / 1000)) * 100 + 400} 250
 Z
 `;
  d3.value = `M 800 250
 S ${Math.abs(2 - Math.sin(now / 1000)) * 40 + 1000} ${
    Math.abs(Math.sin(now / 1000)) * 100
  } ${Math.abs(1 - Math.sin(now / 1000)) * 100 + 600} ${
    Math.abs(Math.sin(now / 1000)) * 30
  }
 S ${Math.abs(2 - Math.sin(now / 4000)) * 100 - 150} ${
    -Math.abs(Math.sin(now / 1000)) * 50 + 100
  } ${Math.abs(Math.sin(now / 1000)) * 50 + 300} 250
 Z
 `;
  mas.value = `matrix(1,0,0,1,${(Math.cos(now / 1000) / 2) * 55 + 5},0)`;
  mas2.value = `matrix(1,0,0,${Math.abs(Math.sin(now / 2000) / 3) + 1},${
    (Math.cos(now / 1000) / 2) * 55 + 20
  },0)`;
  mas3.value = `matrix(1,0,0,${Math.abs(Math.cos(now / 4000)) + 1},${
    (Math.sin(now / 1000) / 2 + 1) * 30 + 45
  },0)`;
  window.requestAnimationFrame(loop);
};
onMounted(()=>{
loop();
})
</script>

<style scoped lang='scss'>
.footer {
  position: fixed;
  bottom: 0;
  .lottie-footer {
    position: absolute;
    left: 50%;
    top: auto;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 1298px;
    opacity: 0.35;
    transform: translateX(-50%);
    -webkit-filter: blur(30px);
    filter: blur(30px);
  }
}
</style>